﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ImageCropper.ascx.cs" Inherits="WebUI.Controls.ImageCropper" %>

<script type="text/javascript" src="../../Script/mootools-1.2.3-core-yc.js"></script>
<script type="text/javascript" src="../../Script/mootools-1.2.3.1-more.js"></script>

<script type="text/javascript">

    var Drag2Crop = new Class({
        Extends: Drag,
        Implements: [Options, Events],
        initialize: function (picture, options) {
            this.setOptions({
                relative: 'relative',
                modifiers: { x: 'scrollLeft', y: 'scrollTop' },
                style: false,
                invert: true,
                top: 0,
                left: 0,
                onComplete: this.complete.bind(this),
                debug: false
            }, options);
            this.top = this.options.top.toInt();
            this.left = this.options.left.toInt();
            this.picture = $(picture);
            this.relative = $(this.options.relative).setStyles({ cursor: 'move' }).scrollTo(-this.left, -this.top);
            this.parent(this.relative);
            this.__construct();
        },
        __construct: function () {
            if (Browser.Engine.trident) document.ondragstart = function () { return false; }; // IE fix
        },
        coordinates: function () {
            this.getCoordinates = this.relative.getScroll();
            this.getSize = this.relative.getSize();
            this.width = this.relative.getSize().x.toInt();
            this.height = this.relative.getSize().y.toInt();
            this.left = -this.getCoordinates.x.toInt();
            this.top = -this.getCoordinates.y.toInt();
        },
        complete: function () {
            this.coordinates();
            this.fireEvent("done", [this.top, this.left, this.width, this.height]);
        }
    });

    window.addEvent('load', function () {
        new Drag2Crop('<%= CropMe.ClientID %>', {
            relative: '<%= CropFrom.ClientID %>',
            top: -30, // Start at top : -30
            left: -60, // Start at left : -60
            onStart: function () {
                this.picture.setStyles({ opacity: 0.5 });
            },
            onDone: function (top, left) {
                this.picture.setStyles({ opacity: 1 });
                var InputTopID = $('<%= TopID.ClientID %>');
                var InputLeftID = $('<%= LeftID.ClientID %>');
                InputTopID.set('value', top); // Add new TOP to form
                InputLeftID.set('value', left); // Add new LEFT to form
            }
        });
    });

    function setMode(edit) {
        var DivID = $('<%=divCrop.ClientID %>');
        var btnUpload = $('<%=btnUpload.ClientID %>');
        var btnEdit = $('<%=btnEdit.ClientID %>');
        var btnSave = $('<%=btnGenerateMe.ClientID %>');
        var DivOutput = $('<%=divOutput.ClientID %>');
        var divUpload = $('divUpload');

        if (edit) {
            DivID.setStyles({ 'display': 'block' });
            DivOutput.setStyles({ 'display': 'none' });
            btnEdit.setStyles({ 'display': 'none' });
            btnSave.setStyles({ 'display': 'block' });
            btnUpload.setStyles({ 'display': 'none' });
            //divUpload.setStyles({ 'display': 'none' });
        }
        else {
            DivID.setStyles({ 'display': 'none' });
            DivOutput.setStyles({ 'display': 'block' });
            btnEdit.setStyles({ 'display': 'block' });
            btnSave.setStyles({ 'display': 'none' });
            btnUpload.setStyles({ 'display': 'block' });
        }
    }

    function showUpload() {
        var divUpload = $('divUpload');
        var btnUpload = $('<%=btnUpload.ClientID %>');
        divUpload.setStyles({ 'display': 'block' });
        btnUpload.setStyles({ 'display': 'none' });
    }

    function onSizeLostFocus(ch) {
        var txtWidth = document.getElementById("<%= txtWidth.ClientID %>");
        var txtHeight = document.getElementById("<%= txtHeight.ClientID %>");
        var hidWidth = document.getElementById("<%= OrgWidth.ClientID %>");
        var hidHeight = document.getElementById("<%= OrgHeight.ClientID %>");

        var scaleW = parseInt(txtWidth.value, 10);
        var scaleH = parseInt(txtHeight.value, 10);
        var orgW = parseInt(hidWidth.value, 10);
        var orgH = parseInt(hidHeight.value, 10);

        if (ch == 'w') {
            var ratio = 1.0 * scaleW / orgW;
            scaleH = ratio * orgH;
            txtHeight.value = Math.round(scaleH);
        }
        else {
            var ratio = 1.0 * scaleH / orgH;
            scaleW = ratio * orgW;
            txtWidth.value = Math.round(scaleW);
        }

    }


    function getDesc() {
        var txtDesc = document.getElementById("<%= txtDesc.ClientID %>");
        return txtDesc.value;
    }
</script>

<style type="text/css">
    .CropFrom {
	    overflow:hidden;
	    cursor:move;
	    text-align:left;
    }
    
    .lnkButton
    {
    	text-decoration:none;
    }
</style> 

<div>
<div id='divUpload' style="display:block">
    <table>
        <tr>
            <td style='text-align:left; vertical-align:top'>
                <asp:Label ID="Label3" class="labelMessage" Text="File: " runat="server"></asp:Label>
                <asp:FileUpload ID="fileUpload" runat="server" />
                <asp:Button ID="btnUpFile" runat="server" OnClick="btnUpFile_OnClick" Text="Upload" Height="20px" />
            </td>
        </tr>
        <tr>
            <td style='text-align:left; vertical-align:top'>
                <asp:Label class="labelMessage" ID="Label2" Text="Description: " runat="server"></asp:Label>
                <asp:TextBox ID="txtDesc" Width="200px" runat="server"></asp:TextBox>
            </td>
        </tr>
    </table>
</div>

<div style='float:left'>
    <asp:Panel class='labelTitle' id="divCrop" runat="server"  GroupingText="Thumbnail" style="display:none"    >
        <asp:Panel id="CropFrom" class="CropFrom" runat="server"  >
	            <asp:Image ID="CropMe" runat="server" name="CropMe"/>
        </asp:Panel>
    </asp:Panel>
    <asp:Panel class='labelTitle' id="divOutput" runat="server"  GroupingText="Thumbnail"  >
	    <asp:Image ID="Output" runat="server" />
    </asp:Panel>

    <div style="padding-left:25px; text-align:left" >
        <asp:LinkButton class='labelTitle' ID="btnUpload" runat="server" Text="" OnClientClick="return false;" />
        <asp:LinkButton class='labelTitle' ID="btnEdit" runat="server" Text="Edit" OnClientClick="setMode(true);return false;" />
        <asp:LinkButton class='labelTitle' ID="btnGenerateMe" runat="server" Text="Crop" OnClick="btnGenerateMe_OnClick" OnClientClick="setMode(false)" style="display:none" />
    </div>
</div>
<div style='float:left; padding-left:10px'>
    <asp:Panel  class='labelTitle' GroupingText="Scale" runat="server" Width="160px" Height="160px">
        <div>
            <asp:Label class='labelTitle' ID="lblScaleW" Width="50px" Text="Width:" runat="server"></asp:Label>
            <asp:TextBox onchange="onSizeLostFocus('w');" Text="100" runat="server" ID='txtWidth' Width="25px"></asp:TextBox><br />
            <asp:Label class='labelTitle' ID="Label1"  Width="50px" Text="Height:" runat="server"></asp:Label>
            <asp:TextBox onchange="onSizeLostFocus('h');"  Text="100" runat="server" ID='txtHeight' Width="25px"></asp:TextBox><br />
        </div>
        <div style="height:4px"> &nbsp; </div>
        <asp:Button ID="btnScale" runat="server" OnClick="btnScale_OnClick" Text="Scale"  />

        <asp:Button ID="btnFit" runat="server" OnClick="btnFit_OnClick" Text="Fit to area"  />

    </asp:Panel>
</div>
<asp:HiddenField id="UrlID" Value="" runat="server" />
<asp:HiddenField id="TopID" Value="0" runat="server" />
<asp:HiddenField id="LeftID" Value="0" runat="server" />
<asp:HiddenField id="OrgWidth" Value="0" runat="server" />
<asp:HiddenField id="OrgHeight" Value="0" runat="server" />
<asp:HiddenField id="hidDefaultPic" Value="~/Images/photo-bds3.png" runat="server" />
</div>